<template>
  <div>
    <flexbox class="bottom-edit-apply vux-1px-t" :gutter="0">
      <flexboxItem :span="4">
        <a @click="cancelConfirm">取消申请</a>
      </flexboxItem>
      <flexboxItem :span="4">
        <a class="vux-1px-l" @click="setQueryParams">缩短日期</a>
      </flexboxItem>
      <flexboxItem :span="4">
        <a class="vux-1px-l" @click="reApplyConfirm">重新申请</a>
      </flexboxItem>
    </flexbox>
    <!-- 取消申請提示彈窗 -->
    <div v-transfer-dom>
      <confirm v-model="cancelTurndownShow"
       class="turndown-confirm turndown-alert" title="提示"
       @on-confirm="cancelThisApply"
       cancel-text="取消" confirm-text="确认" :show-cancel-button="true">
        <p>确定取消申请</p>
      </confirm>
    </div>
    <!-- 重新申請提示彈窗 -->
    <div v-transfer-dom>
      <confirm v-model="reApplyTurndownShow"
       class="turndown-confirm turndown-alert" title="提示"
       @on-confirm="cancelThisApply('ReApply')"
       cancel-text="取消" confirm-text="确认" :show-cancel-button="true">
        <p>确定重新申请？重新申请会取消此条申请！</p>
      </confirm>
    </div>
    <!-- 請求結果提示彈窗 -->
    <div v-transfer-dom>
      <confirm v-model="responseTurndownShow"
       class="turndown-confirm turndown-alert" title="提示"
       cancel-text="取消" confirm-text="确认" :show-cancel-button="true">
        <p>{{responseTurndownText}}</p>
      </confirm>
    </div>
  </div>
</template>

<script>
  import { Flexbox, FlexboxItem, Confirm, TransferDom } from 'vux';
  import qs from 'qs';
  export default {
    name: 'BottomEditApply',
    components: {
      Flexbox,
      FlexboxItem,
      Confirm
    },
    directives: {
      TransferDom
    },
    props: ['startDate'],
    data () {
      return {
        // EditAskLeaveDatetime組件所需的數據模型
        queryParams: {
          KeyId: '',
          Content: {
            StartDate: '',
            EndDate: '',
            Minute: 0,
            Day: '',
            EditApplyDateReason: ''
          }
        },
        cancelTurndownShow: false,
        reApplyTurndownShow: false,
        responseTurndownShow: false,
        responseTurndownText: ''
      };
    },
    mounted () {
      this.queryParams.KeyId = this.$parent.applyInfoDatail.KeyId;
    },
    methods: {
      setQueryParams: function () {
        for (let props in this.queryParams.Content) {
          this.queryParams.Content[props] = this.$parent.applyInfoDatail.Content[props];
        }
        this.goToEditDatetime();
      },
      goToEditDatetime: function () {
        this.$router.replace({
          name: 'EditAskLeaveDatetime',
          query: {
            editAskLeaveDatetimeInfo: JSON.stringify(this.queryParams),
            titleName: '缩短日期'
          }
        });
      },
      cancelConfirm: function () {
        this.cancelTurndownShow = true;
      },
      reApplyConfirm: function () {
        this.reApplyTurndownShow = true;
      },
      cancelThisApply: function (isReApply) {
        let startDate = new Date(this.startDate.replace(/-/g, '/').replace('T', ' '));
        let now = new Date();
        if (startDate - now < 86400000) {
          if (isReApply === 'ReApply') {
            this.responseTurndownText = '重新申请则要在未开始放假前24小时和假期结束前24小时提交';
          } else {
            this.responseTurndownText = '取消申请则要在未开始放假前24小时和假期结束前24小时提交';
          }
          this.responseTurndownShow = true;
          return false;
        }
        let postData = {
          data: {
            KeyId: this.queryParams.KeyId
          }
        };
        this.$parent.loadingShow = true;
        this.axios.post('/Process/CancelAskForLeave', qs.stringify(postData))
        .then((res) => {
          if (res.data.IsSuccess === true) {
            this.$parent.loadingShow = false;
            if (isReApply === 'ReApply') {
              let pushData = this.$parent.applyInfoDatail;
              pushData.IsReApply = true;
              this.$router.push({
                name: 'WriteAskLeave',
                query: {
                  applyInfo: JSON.stringify(pushData)
                }
              });
              return false;
            }
            this.responseTurndownText = '取消成功！';
            this.responseTurndownShow = true;
            this.$parent.getItemDetail();
          } else {
            this.responseTurndownText = '网络连接发生错误，请稍后再试';
            this.responseTurndownShow = true;
          }
        })
        .catch(() => {
          this.responseTurndownText = '网络连接发生错误，请稍后再试';
          this.responseTurndownShow = true;
        });
      }
    }
  };
</script>

<style scoped lang="scss">
  @import '../../assets/style/variable';
  .bottom-edit-apply{
    width: 100%;
    position: absolute;
    bottom: 0;
    z-index: 2;
    &:before{
     top: -.5px;
     border-color: #ccc;
    }
    a{
      display: block;
      position: relative;
      font-size: getRem(32);
      line-height: getRem(98);
      background: #fff;
      text-align: center;
      &.active{
        color: #fff;
        background-image: linear-gradient(194deg,
          #fa5864 0%,
          #fc476d 100%),
        linear-gradient(
            #ffffff,
            #ffffff);
        background-blend-mode: normal,
        normal;
      }
    }
    .vux-1px-l{
      &:before{
        border-color: #ccc;
      }
      &.router-link-active:before{
        border-color: transparent;
      }
    }
    .router-link-active{
      color: #fff;
      background-image: linear-gradient(97deg,
        #fa5864 0%,
        #fc476d 100%),
      linear-gradient(
          #ffffff,
          #ffffff);
      background-blend-mode: normal,
      normal;
    }
  }
</style>
